<template>
  <div class="app-container">
    <div class="step">
      <div class="step-btm">
        <!-- 一、先款奖 -->
        <el-divider content-position="left">一、先款奖</el-divider>
        <div class="box">
          <div class="twotitle">
            ( 销价-运费-包装单价 )＊吨位*
            <el-input type="text" class="inps" v-model="tempdata.xiankuan"></el-input>
          </div>
          <div class="onetitle">承兑汇票回款</div>
          <div class="twotitle">
            承兑汇票回款解付期九十天内计提
            <el-input type="text" class="inps" v-model="tempdata.wanwu"></el-input>
            九十天以上计提
            <el-input type="text" class="inps" v-model="tempdata.waner"></el-input>
          </div>
        </div>
        <!-- 二、利息奖 -->
        <el-divider content-position="left">二、利息奖</el-divider>
        <div class="box">
          <!-- ------------------------------------------------ -->
          <div class="onetitle">没有承兑（超期/不超期）部分:</div>
          <div class="twotitle">
            汽运 >>>>（
            <el-input type="text" class="inps" v-model="tempdata.qiyunxian"></el-input>
            +/-预付天数）＊（销价-运费-包装单价）＊吨位＊1%/30＊
            <el-input type="text" class="inps" v-model="tempdata.buchaoqi1"></el-input>
          </div>
          <div class="twotitle">
            火运 >>>>（
            <el-input type="text" class="inps" v-model="tempdata.huoyunxian"></el-input>
            +/-预付天数）＊（销价-运费-包装单价）＊吨位＊1%/30＊
            <el-input type="text" class="inps" v-model="tempdata.buchaoqi2"></el-input>
          </div>
          <!-- ------------------------------------------------ -->
          <div class="onetitle">有承兑不超期部分:</div>
          <div class="twotitle">
            汽运 >>>>（
            <el-input type="text" class="inps" v-model="tempdata.qiyunxian"></el-input>
            +/-预付天数）＊（销价-运费-包装单价）＊吨位＊1%/30＊
            <el-input type="text" class="inps" v-model="tempdata.chenglixibuchaoqi"></el-input>
          </div>
          <div class="twotitle">
            火运 >>>>（
            <el-input type="text" class="inps" v-model="tempdata.huoyunxian"></el-input>
            +/-预付天数）＊（销价-运费-包装单价）＊吨位＊1%/30＊
            <el-input type="text" class="inps" v-model="tempdata.chenglixibuchaoqi"></el-input>
          </div>
          <!-- ------------------------------------------------ -->
          <div class="onetitle">有承兑超期部分:</div>
          <div class="twotitle">
            汽运 >>>>（
            <el-input type="text" class="inps" v-model="tempdata.qiyunxian"></el-input>
            +/-预付天数）＊（销价-运费-包装单价）＊吨位＊1%/30＊
            <el-input type="text" class="inps" v-model="tempdata.chenglixichaoqi"></el-input>
          </div>
          <div class="twotitle">
            火运 >>>>（
            <el-input type="text" class="inps" v-model="tempdata.huoyunxian"></el-input>
            +/-预付天数）＊（销价-运费-包装单价）＊吨位＊1%/30＊
            <el-input type="text" class="inps" v-model="tempdata.chenglixichaoqi"></el-input>
          </div>
        </div>
        <!-- 三、产品基价内外吨提成 -->
        <el-divider content-position="left">三、产品基价内外吨提成</el-divider>
        <div class="box">
          <div class="onetitle">承兑汇票不超期部分:</div>
          <div class="twotitle">
            1、提成= 
            <el-input type="text" class="inps" v-model="tempdata.jingshui1"></el-input>
            *净水销售价格（第三档基价≤净水销售价格＜第四档基价）*吨位
          </div>
          <div class="twotitle">
            2、提成=
            <el-input type="text" class="inps" v-model="tempdata.jingshui2"></el-input>
            *净水销售价格（第四档基价≤净水销售价格＜第五档基价）*吨位
          </div>
          <div class="twotitle">
            3、提成= 
            <el-input type="text" class="inps" v-model="tempdata.jingshui3"></el-input>
            *第五档基价+
            <el-input type="text" class="inps" v-model="tempdata.jingshui3b"></el-input>
            *（净水销售价格-第五档基价）)*吨位（第五档基价≤净水销售价格）
          </div>
          <div class="tips">
            <div>注：</div>
            <div>
              <p>1、净水销售价格=销售价-运费-包装费用</p>
              <p>2、超出基价五部分按利润部分的10%计提</p>
              <p>3、低于基价三者不计提销售提成</p>
            </div>
          </div>
        </div>
        <div class="box">
          <div class="onetitle">新开发客户提成:</div>
          <div class="twotitle">
            1、提成= 
            <el-input type="text" class="inps" v-model="tempdata.xinkehu1"></el-input>
            *净水销售价格（第三档基价≤净水销售价格＜第四档基价）*吨位
          </div>
          <div class="twotitle">
            2、提成=
            <el-input type="text" class="inps" v-model="tempdata.xinkehu2"></el-input>
            *净水销售价格（第四档基价≤净水销售价格＜第五档基价）*吨位
          </div>
          <div class="twotitle">
            3、提成= 
            <el-input type="text" class="inps" v-model="tempdata.xinkehu3"></el-input>
             *第五档基价+ 
            <el-input type="text" class="inps" v-model="tempdata.xinkehu3b"></el-input>
            *（净水销售价格-第五档基价）)*吨位（第五档基价≤净水销售价格）
          </div>
          <div class="tips">
            <div>注：</div>
            <div>
              <p>1、净水销售价格=销售价-运费-包装费用</p>
              <p>2、超出基价五部分按利润部分的10%计提</p>
              <p>3、低于基价三者不计提销售提成</p>
            </div>
          </div>
        </div>
        <!-- 四、产品基价计算月份 -->
        <!-- <el-divider content-position="left">四、产品基价计算月份</el-divider>
        <div class="twotitle">
          1、产品基价提成更换日期：
          <el-input type="text" class="inps" v-model="tempdata.yuefen"></el-input>
        </div> -->
      </div>
    </div>
    <div class="submits">
      <div class="add" @click="save">确认信息</div>
    </div>
  </div>
</template>

<script>
import { jisuanlist,updatejisuan } from '@/api/neimao'
export default {
  data(){
    return{
      tempdata: {}
    }
  },
  mounted(){
    this.getlist()
  },
  methods:{
    getlist(){
      jisuanlist({}).then(res => {
        console.log(res)
        this.tempdata = res.data
      })
    },
    save(){
      updatejisuan(this.tempdata).then(res => {
        console.log(res)
        this.$message({
          message: res.message,
          type: 'success'
        })
        this.getlist()
      })
    }
  }
}
</script>

<style scoped lang="scss">
/deep/.el-divider {
	background-color: #18A05E;
	position: relative;
}
/deep/.el-divider--horizontal {
  height: 2px;
  margin: 40px 0;
}
/deep/.el-divider__text {
	color: #18A05E;
  font-size: 16px;
  font-weight: 600;
}
.submits{
	display: flex;
	background: #ffffff;
	padding: 0 20px 20px 0;
	justify-content: flex-end;
	align-items: center;
	>div{
		width: 80px;
		height: 32px;
		text-align: center;
		line-height: 32px;
		color: #fff;
		font-size: 14px;
		border-radius: 4px;
		margin-left: 30px;
		cursor: pointer;
	}
  .add{
    background: #18A05E;
  }
	.save{
		background: #2196F3;
	}
	.nosave{
		background: #999;
	}
}
.step {
  padding: 20px;
  background: #fff;
}
.box{
  .onetitle{
    font-size: 15px;
    font-weight: 600;
    margin-top: 10px;
  }
  .twotitle{
    font-size: 14px;
    display: flex;
    align-items: center;
    margin: 5px 0;
  }
  .tips{
    font-size: 12px;
    color: #999;
    display: flex;
    padding: 10px 0 0 20px;
    >div{
      >p{
        margin: 0;
      }
    }
  }
}
/deep/.el-input{
  width: 120px !important;
  margin: 0 10px;
  border: none;
  border-bottom: 1px solid #999;
}
/deep/.el-input--medium .el-input__inner{
  width: 120px !important;
  height: 25px !important;
  line-height: 25px !important;
  border: none;
  color: #18A05E;
}
</style>